<template>
	<div>
		<link rel="stylesheet" href="css/index.css">
		<header class="pub-header">
			<span class="name" :style="titleLeft">易书屋后台管理</span>
			<nav class="nav">
				<!-- 					<a href="#" target="iframe">网站首页</a> -->
				<!-- <a href="#" target="iframe">修改密码</a> -->
				<a href="javascript:" @click="exit">退出</a>
			</nav>
			<!--用户信息 start
				<div class="user-info">
					<a href="#">
						<img src="img/tmp1.png" class="user-header"/>
						<span class="username">administrator</span>
					</a>
					<a href="#" class="label">
						<span class="iconfont icon">&#xe6a5;</span>
						<span class="num">15</span>
					</a>
					<a href="#" class="label">
						<span class="iconfont icon">&#xe60d;</span>
						<span class="num">80</span>
					</a> 
				</div>
				用户信息 end-->
		</header>
 

		<!--左边导航 start-->
		<div class="pub-menu-left" :style="menuHeight" :class="menuClass">
			<div class="logo-block"><img src="img/logo.png" class="logo" /></div>
			<ul class="ul">
				<li class="li" v-for="(v,k) in menuList" :class="menuSelected==k?'on':''">
					<a :href="v.url?v.url:'javascript:'" target="iframe" class="block" @click="swicthMenuSelecte(k,v.url)">
						<span class="icon iconfont" :class="v.icon"></span>
						<span class="menu-name">{{v.title}}</span>
					</a>
					<nav class="nav-son" v-if="v.sonNav.length>0" :style="{height:(menuSelected==k?v.sonNav.length*40:0)+'px'}">
						<a :href="v2.url" target="iframe" v-for="(v2,k2) in v.sonNav" :class="menuSelected2==k+'_'+k2?'on':''" @click="swicthMenuSelecte2(k+'_'+k2,v2.url)">{{v2.title}}</a>
					</nav>
				</li> 
			</ul>
		</div> 
		<!--左边导航 end-->
		<iframe :src="iframeUrl" :style="iframewh" class="pub-iframe" name="iframe" frameborder="0"></iframe>
	</div>
</template>
 
<script>
	module.exports = {
		data: function() {
			return { 
				screenWidth: 0,
				screenHeight: 0,
				menuClass: '',
				menuSelected: 0,
				menuSelected2: "", 
				menuList: [
					{
						icon: "icon-shujiguanli",
						title: '资料管理',
						url: '',
						sonNav: [
							{
								title: '普通资料',
								url: 'book.html'
							},	
							{
								title: '会员资料',
								url: 'memberbook.html'
							},
						] 
					},
					{
						icon: "icon-yonghu1",
						title: '会员管理',
						url: 'member.html',	
						sonNav:[]
					},
					{
						icon:"icon-shezhi",
						title:'网站消息',
						url:'sysmsg.html',
						sonNav:[]
					},
					/*
						{icon:"icon-shouye",title:'首页',url:'main.html',sonNav:[]},
						{icon:"icon-wenzhangguanli",title:'文章管理',url:'article.html',sonNav:[]},
						{icon:"icon-shezhi",title:'网站管理',url:'',sonNav:[			            
							{title:'协议管理',url:'agreement.html'},
							{title:'幻灯片管理',url:'banner.html'}, 
							{title:'网站参数设置',url:'siteinfo.html'},
						]},
					*/
				],
				titleLeft: {
					left: 0
				},
				iframeUrl: 'book.html',
			}
		},
		methods: {
			setSize() {
				this.screenWidth = document.documentElement.clientWidth;
				this.screenHeight = document.documentElement.clientHeight;
				if (this.screenWidth < 1400) {
					this.menuClass = "small-screen";
					this.titleLeft.left = "80px";
				} else {
					this.menuClass = "";
					this.titleLeft.left = "220px";
				}
			},

			//点击一 级菜单  
			swicthMenuSelecte(index, url) { 
				this.menuSelected = index;
				sessionStorage.setItem('url', url);
				sessionStorage.setItem('navPosition', index + "_");
				if (!url) {
					let son = event.currentTarget.parentNode.querySelector('.nav-son a');
					son.click();
				}
			},
 
			//点击二级菜单
			swicthMenuSelecte2(index, url) {
				this.menuSelected2 = index;
				sessionStorage.setItem('url', url);
				sessionStorage.setItem('navPosition', index);
			}, 

			//设置右侧初始页
			iframeInit() {
				var recordUrl = sessionStorage.getItem('url');
				var navPosition = sessionStorage.getItem('navPosition');
				if (recordUrl) {
					this.iframeUrl = recordUrl;
					if (navPosition) {
						let navPosition2 = navPosition.split('_')[0];
						this.menuSelected = navPosition2;
						this.menuSelected2 = navPosition;
					}
				}
			},
			//退出
			exit() {
				ajax({
					url: 'login/loginout',
					success(res) {
						location.href = 'login.html'
					}
				})
			}
		},
		computed: { 
			//iframe宽高 
			iframewh() {
				let w, l;
				if (this.screenWidth < 1400) {
					w = 60;
					l = 80;
				} else {
					w = 210;
					l = 20;
				}
				return {
					width: this.screenWidth - w - 3 - 20 + "px",
					height: this.screenHeight - 70 + "px",
					marginLeft: l + "px"
				}
			},
			//左侧菜单高度
			menuHeight() { 
				return {
					height: this.screenHeight + "px"
				}
			}
		},
		mounted() {
			this.setSize();
			//this.iframeInit();
			window.onresize = this.setSize;
		}
	}
</script>
